import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/net_data/entity/ItemList.dart';
import 'package:flutter_app/router/router.dart';

///抽取网格布局的item_page
class GridViewPage extends StatefulWidget {
  GridViewPage({Key ?key, this.items}) : super(key: key);
  final List<ListItem>? items;

  @override
  State<StatefulWidget> createState() => _GridViewPageState();
}

class _GridViewPageState extends State<GridViewPage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: GridView.builder(
          padding: const EdgeInsets.all(10),
          itemCount: widget.items?.length,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              //横轴元素个数
              crossAxisCount: 3,
              //纵轴间距
              mainAxisSpacing: 10.0,
              //横轴间距
              crossAxisSpacing: 10.0,
              //子组件宽高长度比例
              childAspectRatio: 1.0),
          itemBuilder: (BuildContext context, int index) {
            return getItem(widget.items![index]);
          }),
    );
  }

  Widget getItem(ListItem item) {
    return GestureDetector(
      child: DecoratedBox(
        decoration: BoxDecoration(
            gradient:
                LinearGradient(colors: [Colors.orange, Colors.red]), //背景渐变
            borderRadius: BorderRadius.circular(3.0),
            boxShadow: [
              BoxShadow(
                  color: Colors.black45,
                  offset: Offset(2.0, 2.0),
                  blurRadius: 4.0)
            ]),
        child: Container(
          padding: const EdgeInsets.all(5),
          alignment: Alignment.center,
          child: Text(
            item.title,
            style: TextStyle(
              color: Colors.white,
              fontSize: 18,
            ),
          ),
        ),
      ),
      onTap: () {
        XRouter.goto(context, item.pageName);
      },
    );
  }
}
